<template>
    <div>
        <div class="button" @click="handleClick">{{btnText}}</div>
    </div>
</template>

<script>
    export default {
        props: ['btnText'],
        methods: {
            handleClick() {
                console.log('按钮被点击了');
                // 这里按钮子组件内部, 没法处理登录/注册需求
                // 只知道自己被点击, 需要通知父页面后续处理
                // 1. 子组件主动 emit 事件
                this.$emit('submit')
            }
        }
    };
</script>

<style lang="less" scoped>
    .button {
        background-color: #cc3300;
        color: #fff;
        text-align: center;
        line-height: 48/360 * 100vw;
        border-radius: 24/360 * 100vw;
        margin-top: 30/360 * 100vw;
    }
</style>